<template>
<!-- 课堂管理 -->
  <div>
    <!-- 卡片区域 -->
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>校区管理</el-breadcrumb-item>
            <el-breadcrumb-item>课堂管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 筛选导航 -->
            <el-row>
              <el-col :span="22">
                <el-row>
                      <el-col :span="20">
                          <div class="grid-content bg-purple col-demonstration1">
                              <!-- 创建时间 -->
                              <div class="block">
                                  <span class="demonstration">创建时间:</span>
                                  <el-date-picker
                                  v-model="value1"
                                  size="mini"
                                  type="date"
                                  placeholder="选择日期">
                                  </el-date-picker>
                              </div>
                              <div class="block">
                                  <span class="demonstration">--</span>
                                  <el-date-picker
                                  v-model="value1"
                                  size="mini"
                                  type="date"
                                  placeholder="选择日期">
                                  </el-date-picker>
                              </div>
                              <!-- 节点名称 -->
                              <div class="col-select">
                                  <span>所属科目:</span>
                                  <el-select v-model="value"  size="mini" placeholder="请选择">
                                      <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value">
                                      </el-option>
                                  </el-select>
                              </div>
                              <div class="col-select">
                                  <span>课程状态:</span>
                                  <el-select v-model="value"  size="mini" placeholder="请选择">
                                      <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value">
                                      </el-option>
                                  </el-select>
                              </div>
                              <div class="col-select">
                                  <span>收费方式:</span>
                                  <el-select v-model="value" size="mini" placeholder="请选择">
                                      <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value">
                                      </el-option>
                                  </el-select>
                              </div>
                          </div>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="20">
                          <div class="grid-content bg-purple col-demonstration1">
                              <!-- 创建时间 -->
                              <div class="block">
                                  <span class="demonstration">授课日期:</span>
                                  <el-date-picker
                                  v-model="value1"
                                  size="mini"
                                  type="date"
                                  placeholder="选择日期">
                                  </el-date-picker>
                              </div>
                              <div class="block">
                                  <span class="demonstration">--</span>
                                  <el-date-picker
                                  v-model="value1"
                                  size="mini"
                                  type="date"
                                  placeholder="选择日期">
                                  </el-date-picker>
                              </div>
                              <!-- 节点名称 -->
                              <div class="col-select">
                                  <span>授课方式:</span>
                                  <el-select v-model="value"  size="mini" placeholder="请选择">
                                      <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value">
                                      </el-option>
                                  </el-select>
                              </div>
                              <!-- 搜索框 -->
                            <div class="col-select col-select-input" >
                                <span>关键词:</span>
                                <el-input v-model="input" @change='changeInput' size="mini" placeholder="请输入课程名称/教师昵称搜索"></el-input>
                                <el-button size="mini" type="primary">搜索</el-button>
                            </div>
                          </div>
                      </el-col>
                    </el-row>
                  </el-col>
                <el-col :span='2'>
                  <el-button size="mini" type="primary" @click='applyCourse'>申请开课</el-button>
                </el-col>
              </el-row>
        <!-- tab表格 -->
        <el-table
            stripe
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
                prop="City"
                label="城市"
                width="180">
            </el-table-column>
            <el-table-column
                prop="District"
                label="城区"
                width="180">
            </el-table-column>
            <el-table-column
                prop="info"
                label="是否需要管理"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="compile">编辑</el-button>
                    <el-button
                    size="mini"
                    @click="seeStudents">查看学员</el-button>
                    <el-button
                    size="mini"
                    @click="deleteCourse(scope.row)">删除</el-button>
                    <el-button
                    size="mini"
                    @click="putAway(scope.row)">上架</el-button>
                    <el-button
                    size="mini"
                    @click="soldOut(scope.row)">下架</el-button>
                    <el-button
                    size="mini"
                    @click="constraint(scope.row)">强制下架</el-button>
                     <el-button
                    size="mini"
                    @click="apply(scope.row)">报名资格</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器组件导入 -->
        <pageBox @pagintionlist='pagintionlist2' :pagination='paginations'></pageBox>
    </el-card>
  

    <!-- 确认按钮 -->
    <messIndex :deleteParams="deleteObj" @deleMess='deleMess'></messIndex>
    <!-- 编辑对话框 -->
    <dialogIndex :hiddens='dialogVisible'>
      <!-- <el-form :rules="formrules" ref="formrules" :model="infoForm" label-width="120px"> -->
            <basicInformation  @childFn='parentFn1'></basicInformation>
        <!-- </el-form> -->
      
    </dialogIndex>

    <!-- 强制下架对话框 -->
    <!-- 对话框 -->
    <!-- @childFn='parentFn'(父亲接收子传递过来的值) :hiddens='dialogVisible'(子向父传递参数) -->
    <dialogCourse @childFn='parentFn'  :hiddens='adddialogVisibles'>
        <el-form :rules="formrules" :model="infoForm" ref="formrules" label-width="120px">
          <el-form-item label="强制下架原因:" prop="desc">
            <el-input type="textarea" v-model="infoForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="下架凭证:">
            <upload></upload>
          </el-form-item>
          <span class="upload-text">是否确定要强制下架该课程？</span>
        </el-form>
    </dialogCourse>

    <!-- 报名资格 -->
    <dialogCourse @childFn='parentFn2'  :hiddens='applyDialogVisibles'>
        <div class="elContent">
          <el-form class="formDialog" :rules="formrules2" :model="infoForm2" ref="formrules2" label-width="120px">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="身份级别：" name="1">
                <el-form-item label="">
                  <div  class="checkboxAll">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  </div>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="退休单位：" name="2">
                <el-form-item label="">
                <div  class="checkboxAll">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  </div>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
    </dialogCourse>
  </div>
</template>

<script>
// 全选类表
const cityOptions = ['上海', '北京', '广州', '深圳'];
import dialogIndex from '@/components/commons/Dialog/index.vue'//公共对话框
import pageBox from '@/components/commons/Pagination/index.vue'//公共分页器
import {getUserList} from '@/api/user.js'//测试接口
import messIndex from '@/components/commons/MessageBox/index.vue'//公共确认弹框
import basicInformation from '../components/basicInformation'//基本信息组件
import dialogCourse from '../components/dialog'//当前文件的对话框
import Upload from '@/components/commons/Upload/index.vue'//上传图片


export default {
  name: 'personnelManagement',

  components:{
      dialogIndex,
      pageBox,
      messIndex,
      basicInformation,
      dialogCourse,
      Upload
  },
  data(){
      return{
          // 编辑对话框的内容
            dialogVisible:{},
          // 强制下架对话框的内容
            adddialogVisibles:{},
            // 报名资格对话框的内容
            applyDialogVisibles:{},
            infoForm:{
                desc:''
            },
            // 报名资格信息
            infoForm2:{
               
            },
            formrules2:{

            },
            // 验证规则
            formrules:{
                desc: [
                    { required: true, message: '填写下架原因', trigger: 'blur' }
                ],
               
            },
            //   账户列表
          tableData:[],
          // 分页
          paginations:{},
        //   选择器类别
          options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        // 选择器当前选择的val
        value: '选项1',
        // 当前选中的日期
        value1: '',
        // 搜索框的val值
        input: '',
        // 三级联动
        options3: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        // 选中的三级联动val
        selectedOptions3: ['zujian', 'data', 'tag'],
        // 树形控件
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // 默认被选中的节点id
        defkey:[2,4],
        // 状态
        radio:'1',//默认启用
        // 弹框切换
        showPermision:true,
        // 确认弹框对象
        deleteObj:{
          title:''
        },
        // 基本信息组件显示隐藏
        showBasic:false,
        // 报名资格全选
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true,
        // 当前展示的内容
        activeNames: ['1','2']
      }
  },
  methods:{

    //   接收子传递过来的页码对象
      pagintionlist2(obj){
        //   调用渲染表格
          this.table(obj);
      },

    //   获取表格
      table(val){
        //   调用账户列表
        getUserList({
            queryText:'',
            memberTypeID:'',
            pageIndex:val.current-1,
            pageSize:val.num
        }).then(res=>{
            console.log(res)
            this.tableData=res.data
            // 给子组件传递参数
            this.paginations={
              pageIndex:val.current,//当前显示第几页数
              pageSize:val.num,//每页显示几条数据
              total:res.rowsCount,//总共多少条数据
            }
        })
      },


      // // 关闭并重置表单
        refsClose(){
            this.$refs.formrules.resetFields()
        },

        // 接收子组件传递的值
        parentFn1(val){
            if(val=='sub'){
                  this.dialogVisible.visible=false
            }
        },



        // 输入框发生改变触发
        changeInput(obj){
            console.log(this.input)
        },
        // 级联选择发生改变触发
        changeOptions(){
            console.log(this.selectedOptions3)
        },

        // 点击删除按钮
        deleteCourse(){
          this.deleteObj={
              title:'是否要删除该课程',
            }
        },

        // 点击上架按钮
        putAway(){
          this.deleteObj={
              title:'是否要上架该课程',
            }
        },
        // 父接收来自子组件的确认方法
        deleMess(obj){
          if(obj=='del'){
            getUserList({
               queryText:'',
              memberTypeID:'',
              pageIndex:0,
              pageSize:3
            }).then(res=>{
              if(res.code==1){
              this.$message.success('删除成功')
              }
            })
          }
        },
        // 点击下架按钮
        soldOut(row){
          this.deleteObj={
              title:'是否要下架该课程',
            }
          
        },

        // 点击编辑按钮
        compile(){
          // this.showPermision=false
          this.dialogVisible={
            // 显示、隐藏对话框
            visible:true,
            // 对话框的标题
            title:'编辑',
            // 按钮的显示与隐藏
            shows:false,
            // // 提交按钮的文字内容
            // button:'保存',
            // 对话框的宽度
            width:'40%'
          }
        },
        // 点击申请开课按钮
        applyCourse(){
          this.$router.push('/applyCourse')
        },

        // 点击查看学员
        seeStudents(){

        },

        // 强制下架
        constraint(){
          this.adddialogVisibles={
            visible:true,
            title:'强制下架',
          }
        },

         // 接收子组件传递的值
        parentFn(val){
            if(val=='sub'){
             this.$refs.formrules.validate((valid) => {
                      if(!valid) return;
                      this.$message.success('保存');
                      this.refsClose();
                      this.adddialogVisibles.visible=false
                  })
                // 重置表单
            }else if(val=='hiddens'){
                this.refsClose()
            }
        },

        // 点击报名资格按钮
        apply(){
          this.applyDialogVisibles={
            visible:true,
            title:'报名资格',
            buttonName:'保存',
          }
        },
        // 报名资格接收子组件传递的值
        parentFn2(val){
            if(val=='sub'){
             this.$refs.formrules2.validate((valid) => {
                      if(!valid) return;
                      this.$message.success('保存');
                      this.$refs.formrules2.resetFields()
                      this.applyDialogVisibles.visible=false
                  })
                // 重置表单
            }else if(val=='hiddens'){
                this.$refs.formrules2.resetFields()
            }
        },

        // 报名资格全选
        // 全选状态发生改变时触发
        handleCheckAllChange(val) {
          console.log(val,'全选')
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        console.log(value,'单选')
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }

  },
  created(){
      this.table({
          num:10,
          current:0,
        })
  }
}
</script>

<style lang="less" scoped>
// .navFlex{
//   display: flex;
//   justify-content: space-between;

//   div{
//     flex:1;
//     display: flex;
//     flex-direction: column;
//   }
// }
.formDialog{
  overflow-y: auto;
  height: 300px;
  overflow-x: hidden;
}
.col-demonstration1{
    display: flex;
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 130px;
        font-size: 12px;
    }
    .el-select{
        width: 100px;
    }
    .col-select{
        margin-left: 14px;
        span{
            margin-right: 4px;
            font-size: 12px;
        }
    }
    .demonstration{
      font-size: 12px;
    //  margin-right: 4px;
    //  margin-left: 0;
    }
}
.col-input{
    display: flex;
    justify-content: flex-end;
    .el-input{
        width: 90%;
        margin-right: 10px;
    }
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 30px;
}
.el-scrollbar__view .el-cascader-menu__list li{
    padding: 10px;
}
.col-select-input{
    display: flex;
    align-items: center;
    .el-input{
        width: 100%;
    }
    span{
        width: 65px;
    }
    .el-button{
        margin-left: 10px;
    }
}
// 上传文件
.el-uploads{
    margin-top: 10px;
}
.upload-text{
  display: block;
  text-align: center;
  color:black;
  font-size: 14px;
}
.el-checkbox-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.el-checkbox+.el-checkbox{
  margin-left: 0;
}
.checkboxAll{
  display: flex;
  justify-content: flex-start;
  margin-left: -20px;
}
.el-row{
  display: flex;
  align-items: center;
}
</style>
